<template>
	<view class="date">
		<view class="headContent">
			<view class="head">
				<!-- <view class="icon" @click="switch_month_week('prev',true)"><text class="iconfont icon-fanhui color" />
				</view>
				<view class="title">{{nowYear+'年'+nowMonth+'月'}}</view>
				<view class="icon" @click="switch_month_week('next',true)"><text
						class="iconfont next icon-fanhui color" />
				</view> -->

				<!-- <picker mode="date" :value="totalData.fSampledates" start="1964-09-01" end="2080-09-01"
					@change="fieldDateChange">
					<view class="picker">
						{{totalData.fSampledates}}
					</view>
				</picker> -->
				<view class="icon" @click="changeMonth('pre')"><text class="iconfont icon-fanhui color" />
				</view>

				<xpPicker mode="ym" :action-position="actionPosition" :history="history" :year-range="[2020,2530]"
					@confirm="confirm">
					<view class="title">{{y+'年'+formatNum(m)+'月'}}</view>
				</xpPicker>
				<!-- <view class="title" @change="selectYear">{{y+'年'+formatNum(m)+'月'}}</view> -->
				<view class="icon" @click="changeMonth('next')"><text class="iconfont next icon-fanhui color" />
				</view>
				<!-- <view class="year">选择年</view> -->
				<!-- v-if="headerBar" -->
				<!-- <view class="header">
					<view class="pre" @click="changeMonth('pre')">上个月</view>
					<view>{{y+'年'+formatNum(m)+'月'}}</view>
					<view class="next" @click="changeMonth('next')">下个月</view>
				</view> -->
			</view>
			<view class="statistics">
				<view class="statisticsTop">
					<view class="statisticsMoudle" v-for="(item,index) in listArr" :key="index">
						<view class="time">{{item.data}}</view>
						<view class="text">{{item.text}}</view>
					</view>
				</view>
				<!-- 	<view class="min-collapse">
					<view class="card">
						<view>
							<view class="contents" :class="isShow ? 'animation': 'show-list animation' "
								:style="{'height':isShow? 120+'upx' :'0'}">
								<view class="m-right-20 statisticsMoudle" @click="chioce(index)"
									v-for="(item,index) in list" :key="index">
									<view class="time">{{item.data}}</view>
									<view class="text">{{item.text}}</view>
								</view>
							</view>
						</view>
						<view class="card-view retract icon" @click="test">
							<text class="iconfont next icon-fanhui" :class="[isShow ? '' : 'retract_icon']" />
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="dataList">
			<view class="everyDay">
				<view>每日记录</view>
				<view class="text">({{formatNum(m)+'月'}})</view>
			</view>

			<view class="date_dl">
				<view class="dd" style="color: #999;" v-for="(item, index) in weekDay" :key="index">{{item}}</view>
				<!-- <view class="dd" style="color: #999;" v-for="(item,index) in week" :key="index">{{item}}</view> -->
			</view>
			<view :class="{ hide: !retract }" class="content" :style="{ height: height }">
				<view :style="{ top: positionTop + 'rpx' }" class="days">
					<view class="item" v-for="(item, index) in dates" :key="index">
						<view class="day" @click="selectOne(item, $event)" :class="{
			                            choose: choose == `${item.year}-${item.month}-${item.date}`&&item.isCurM,
			                            nolm: !item.isCurM,
			                            today: isToday(item.year, item.month, item.date,item.status),
			                            isWorkDay: isWorkDay(item.year, item.month, item.date)
			                        }">
							{{ Number(item.date) }}
							<view class="markDay" :style="`background:${item.background}`"
								v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
						</view>

						<!-- <view class="today-text" v-if="isToday(item.year, item.month, item.date)">今</view> -->
					</view>



				</view>
			</view>


			<view @click="toggle" class="retract icon"><text class="iconfont next icon-fanhui"
					:class="[retract ? '' : 'retract_icon']" /></view>
			<view class="status cardMissing" v-show="cardMissing">
				<view class="statusIcon">缺卡</view>
				<view class="statusDate"></view>
			</view>
			<view class="status cardLeave" v-show="cardLeave">
				<view class="statusIcon">请假</view>
				<view class="statusDate">10:00-20:00(时长:一天)</view>
			</view>
			<view class="status cardClock" v-show="cardClock">
				<view class="statusIcon">正常打卡</view>
				<view class="statusDate">{{time}}</view>
				<view class="statusAddress">
					<view>
						<image style="width: 17.6upx;height: 24upx;" src="../../static/loction.png" mode=""></image>
					</view>
					<view>{{address}}</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import xpPicker from '@/components/xp-picker/xp-picker.vue';



	export default {
		props: {


			// 星期几为第一天(0为星期日)
			weekstart: {
				type: Number,
				default: 0
			},
			// 标记的日期
			markDays: {
				type: Array,
				default: () => {
					return [];
				}
			},
			//是否展示月份切换按钮
			headerBar: {
				type: Boolean,
				default: true
			},
			// 是否展开
			open: {
				type: Boolean,
				default: true
			},
			//是否可收缩
			collapsible: {
				type: Boolean,
				default: true
			},
			// :shouldDay="shouldDay" :normalDay="normalDay" :errorDay="errorDay",
			shouldDay: { //应打卡天数（个人）
				type: Number,
				default: 0
			},
			normalDay: { //实打卡天数（个人）
				type: Number,
				default: 0
			},
			errorDay: { // 有问题打卡天数（个人）
				type: Number,
				default: 0
			},

			listArr: {
				type: Array,
				default: () => {
					return [];
				}
			},


			//未来日期是否不可点击
			disabledAfter: {
				type: Boolean,
				default: false
			}
		},
		components: {
			xpPicker
		},
		data() {
			return {

				actionPosition: "bottom",
				history: true,

				date: "",
				// 打卡状态/ */
				cardMissing: false, //缺卡
				cardLeave: false, //请假
				cardClock: false, //正常打卡
				weektext: ['日', '一', '二', '三', '四', '五', '六'],
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				dates: [], // 当前月的日期数据
				positionTop: 0,
				monthOpen: false,
				choose: '',


				lists: [
					// {
					// 	data: "13",
					// 	text: "正常(天)"
					// },
					// {
					// 	data: "16",
					// 	text: "应出勤(天)"
					// }, {
					// 	data: "13",
					// 	text: "实际出勤(天)"
					// },

				],
				list: [{
						data: "16",
						text: "应出勤(天)"
					}, {
						data: "13",
						text: "实际出勤(天)"
					},
					{
						data: "2",
						text: "休息(天)"
					}
				],

				retract: true,

				isShow: false,
				currents: Number,
				values: '',
				time: "",
				address: ""
			}
		},
		watch: {

		},
		onLoad() {
			this.choose = this.getToday().date;
			// this.todays()
			// this.lists= [{
			// 			data: this.shouldDay-this.normalDay,
			// 			text: "正常(天)"
			// 		},
			// 		{
			// 			data: this.shouldDay,
			// 			text: "应出勤(天)"
			// 		}, {
			// 			data: this.normalDay,
			// 			text: "实际出勤(天)"
			// 		}

			// 	]

		},

		computed: {




			// 顶部星期栏
			weekDay() {
				return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
			},
			height() {
				return (this.dates.length / 7) * 80 + 'rpx';
			}

		},
		onShow() {
			// console.log(this.y, this.m)
			this.dates = this.monthDay(this.y, this.m);
			!this.open && this.toggle();
			// this.initVisible();
			let index = -1;
			this.dates.forEach((i, x) => {
				this.isToday(i.year, i.month, i.date, 5) && (index = x);
			});
			this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
		},
		onReady() {

		},
		created() {
			// this.init();
			// this.choose = this.getToday().date;
			this.dates = this.monthDay(this.y, this.m);
			!this.open && this.toggle();
			// this.initVisible();
			let index = -1;
			this.dates.forEach((i, x) => {
				this.isToday(i.year, i.month, i.date, 5) && (index = x);
			});
			// this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
			this.positionTop = 0;
			this.todays()

		},
		mounted() {

		},
		onInit() {

		},
		methods: {
			todays() {
				var week = new Date().getDay();

				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				month = month > 10 ? month : "0" + month;
				var day = date.getDate(); //获取当前日(1-31)
				day = day > 10 ? day : "0" + day;
				var time = year + '-' + month + '-' + day
				// let today = this.getToday().date;

				this.markDays.map((item) => {
					if (item.date == time) {

						if (item.status == 2) {
							this.cardClock = true

							this.cardMissing = false

							this.cardLeave = false
						}

						var data = {
							background: "#fff",
							date: day,
							day: week,
							isCurM: true,
							month: month,
							year: year,
							status: item.status,
							address: item.address,
							time: item.time
						}
						this.selectOne(data, 1)
					}
				})

			},

			radioChange(e) {
				this.actionPosition = e.detail.value
			},
			confirm(e) {

				this.y = e.value.split("-")[0];
				this.m = e.value.split("-")[1];
				this.dates = this.monthDay(this.y, this.m);
				this.cardClock = false
				this.cardMissing = false
				this.cardLeave = false

				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				month = month > 10 ? month : "0" + month;

				if (this.y == year && this.m == month) {
					this.todays()
				}


				var time = `${this.y}-${this.m}`;


				this.$emit('time', time)

			},
			changeS(e) {
				this.history = e.detail.value
			},
			selectYear() {},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			getToday() {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth();
				let d = date.getDate();
				let week = new Date().getDay();
				let weekText = ['日', '一', '二', '三', '四', '五', '六'];
				let formatWeek = '星期' + weekText[week];
				let today = {
					date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
					week: formatWeek
				};
				return today;
			},
			// 获取当前月份数据
			monthDay(y, month) {
				let dates = [];
				let m = Number(month);
				let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
				let startDay = (() => {
					// 周初有几天是上个月的
					if (firstDayOfMonth == weekstart) {
						return 0;
					} else if (firstDayOfMonth > weekstart) {
						return firstDayOfMonth - weekstart;
					} else {
						return 7 - weekstart + firstDayOfMonth;
					}
				})();
				let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
				for (let i = 1; i <= startDay; i++) {
					dates.push({
						date: this.formatNum(lastDayOfLastMonth - startDay + i),
						day: weekstart + i - 1 || 7,
						month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
						year: m - 1 >= 0 ? y : y - 1,
						background: "#fff"
					});
				}
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: this.formatNum(j),
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: this.formatNum(m),
						year: y,
						isCurM: true, //是否当前月份
						background: "#fff"
					});
				}
				for (let k = 1; k <= endDay; k++) {
					dates.push({
						date: this.formatNum(k),
						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
						month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
						year: m + 1 <= 11 ? y : y + 1,
						background: "#fff"
					});
				}

				return dates;
			},
			isWorkDay(y, m, d) {
				//是否工作日
				let ymd = `${y}/${m}/${d}`;
				let formatDY = new Date(ymd.replace(/-/g, '/'));
				let week = formatDY.getDay();
				if (week == 0 || week == 6) {
					return false;
				} else {
					return true;
				}
			},
			isFutureDay(y, m, d) {
				//是否未来日期
				let ymd = `${y}/${m}/${d}`;
				let formatDY = new Date(ymd.replace(/-/g, '/'));
				let showTime = formatDY.getTime();
				let curTime = new Date().getTime();
				if (showTime > curTime) {
					return true;
				} else {
					return false;
				}
			},
			// 标记日期
			isMarkDay(y, m, d) {

				let flag = false;
				// let today = this.getToday().date;

				for (let i = 0; i < this.markDays.length; i++) {
					let dy = `${y}-${m}-${d}`;
					if (this.markDays[i].date == dy) {
						if (this.markDays[i].status == 0) {

							this.dates.map(item => {

								if (item.date == this.markDays[i].date.substring(8, 10)) {
									item.status = 4
									// #FFC26F
									item.background = "#FFC26F"

									return false
								}
							})

						} else if (this.markDays[i].status == 1) {
							// this.dates.background="green"
							this.dates.map(item => {
								if (item.date == this.markDays[i].date.substring(8, 10)) {
									item.status = 3
									// 
									item.background = "#FFC26F"
									// this.cardMissing = false
									// this.cardLeave = true
									// this.cardClock = false
									return false

								}
							})
						} else {
							// console.log(this.dates)
							// this.dates.background="green"
							this.dates.map(item => {
								// console.log(this.markDays[i].date.substring(8, 10))
								if (item.date == this.markDays[i].date.substring(8, 10)) {
									// console.log(this.markDays)
									item.status = 2
									item.background = "#0863E8"
									item.address = this.markDays[i].address
									item.time = this.markDays[i].time
									// this.cardMissing = false
									// this.cardLeave = false
									// this.cardClock = true
									return false

								}
							})
						}
						// today


						flag = true;
						break;
					}
				}
				// this.status(this.dates)
				return flag;
			},

			isToday(y, m, d, num) {

				let checkD = y + '-' + m + '-' + d;
				let today = this.getToday().date;

				if (checkD == today) {
					return true;

				} else {
					return false;
				}
			},
			// 展开收起
			toggle() {
				this.retract = !this.retract;
				// this.monthOpen = !this.monthOpen;
				if (this.retract) {
					this.positionTop = 0;
				} else {
					let index = -1;
					this.dates.forEach((i, x) => {
						this.isToday(i.year, i.month, i.date, 5) && (index = x);
					});
					this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
				}
			},
			// 点击回调
			selectOne(i, event) {
				// console.log(i)
				this.address = i.address
				this.time = i.time

				this.cardClock = false
				this.cardMissing = false
				this.cardLeave = false
				// cardMissing:false,//缺卡
				// cardLeave:false,//请假
				// cardClock:false,//正常打卡

				if (i.status && i.status == 4) { //缺卡
					this.cardMissing = true


					this.cardLeave = false
					this.cardClock = false
				} else if (i.status && i.status == 3) { //请假
					this.cardLeave = true
					this.cardMissing = false
					this.cardClock = false
				} else if (i.status && i.status == 2) { //正常打卡
					this.cardClock = true
					this.cardMissing = false
					this.cardLeave = false
				} else {
					this.cardClock = false
					this.cardMissing = false
					this.cardLeave = false
				}

				let date = `${i.year}-${i.month}-${i.date}`;
				let selectD = new Date(date).getTime();
				let curTime = new Date().getTime();
				let week = new Date(date).getDay();
				let weekText = ['日', '一', '二', '三', '四', '五', '六'];
				let formatWeek = '星期' + weekText[week];
				let response = {
					date: date,
					week: formatWeek
				};
				if (!i.isCurM) {

					return false;
				}
				if (selectD > curTime) {
					if (this.disabledAfter) {

						return false;
					} else {
						this.choose = date;
						this.$emit('onDayClick', response);
					}
				} else {
					this.choose = date;
					this.$emit('onDayClick', response);
				}

			},
			//改变年月
			changYearMonth(y, m) {
				this.dates = this.monthDay(y, m);
				this.y = y;
				this.m = m;
			},
			changeMonth(type) {
				// console.log(type)
				if (type == 'pre') {
					// this.y = this.y - 1;
					// this.m = 12;
					if (this.m - 0 + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m - 0 + 1 == 13) {
						this.m = 1;
						this.y = this.y - 0 + 1;
					} else {
						this.m = this.m - 0 + 1;
					}
				}
				this.m = this.m > 10 ? this.m : '0' + this.m
				var time = `${this.y}-${this.m}`;
				// console.log(time)
				this.dates = this.monthDay(this.y, this.m);

				this.$emit('time', time)
			},




			test() {
				this.isShow = !this.isShow
				// this.retracts = !this.retracts;
			},
			chioce(n) {
				if (toString.call(this.list) === '[object Array]') {
					this.currents = n
					this.values = this.list[n]
				}
			},

			change() {
				let value = {
					fulldate: this.date.replace(/-(\d)(?!\d)/g, '-0$1')
				};

				this.$emit('change', value)
			},




		}
	}
</script>

<style lang="less" scoped>
	// @import "../../uni";
	@import "icon.css";
	@import (less) '../../static/lx-calendar/fonts/iconfont.css';

	@color: #007aff;
	@color_disabled: #f1f1f1;
	@color_standard: #333;
	@color_border: #f5f5f5;

	.date {
		background-color: #fff;
	}

	.min-collapse {
		width: 100%;

		.right-arrow {
			//p-left-10
			width: 24rpx;
			height: 24rpx;
			padding-top: 10rpx;
			transform: rotate(90deg);
			padding-left: 10rpx;
		}

		.right-arrow-a {
			transform: rotate(7deg);
		}

		.card {
			// box-shadow: 0 0 10px 4px #EEEEEE;

			.card-view {
				width: 100%;
				//min-flex min-flex-main-between f28
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				padding: 0rpx;
				padding-bottom: 0;

			}
		}

		.contents {
			overflow: hidden;
			display: flex;
			// justify-content: flex-start;
			// flex-wrap: wrap;
			// max-height: 0;
			// padding: 0 20rpx;

			.statisticsMoudle {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				height: 100upx;
				margin: 50upx 0 0 0;
				border-right: 4upx solid #666666;

				.time {
					color: #333333;
					font-size: 40upx;
					font-weight: 700;
				}

				.text {
					color: #666666;
					font-size: 24upx;
					line-height: 40upx;
				}
			}

			.statisticsMoudle:last-child {
				border: none !important;
			}

			.chioce-date-item {
				// width: 112rpx;
				// height: 58rpx;


				font-size: 28rpx;
				text-align: center;

				display: block;
			}

			.chioce-date-item:nth-child(5n) {
				margin: 0;
			}

			.chioce-date-item-active {
				// width: 112rpx;
				// height: 58rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.chioce-date-item-active:nth-child(5n) {
				margin: 0;
			}

			.m-right-20 {
				// margin-right: 35rpx;
				// margin-bottom: 20rpx;
			}
		}

		//在txt中修改左右间距，默认使用父组件外容器的边距
		.content-txt {
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			max-height: 0;
			padding-left: 20rpx;
			padding-right: 20rpx;

			// padding-bottom: 20rpx;
			.txt {
				word-break: break-all;
				white-space: normal;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				// padding:0 20rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.show-list {
			height: 0;
		}

		.show {
			max-height: 0;
			margin-bottom: 20rpx;
		}

		.animation {
			transition-property: all;
			transition-duration: 0.5s;
			transition-timing-function: ease;
		}
	}

	.date {
		width: 750rpx;
	}

	.dataList {
		width: 331px;
		padding-bottom: 2px;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
		background-color: rgb(255, 255, 255);
		margin: 30upx auto;


		.everyDay {
			padding: 10upx 0 0 35upx;
			color: #333333;
			font-size: 32upx;
			font-weight: 700;
			display: flex;
			align-items: center;

			.text {
				color: #999999;
				font-size: 24upx;
				margin-left: 20upx;

			}
		}

		.status {
			display: flex;
			flex-direction: column !important;
			font-size: 28upx;
			margin: 0 40upx 20upx;

			.statusIcon {
				color: #FFC26F;
				font-size: 28upx;
				position: relative;
				padding-left: 30upx;
				line-height: 50upx;

			}

			.statusAddress {
				display: flex;
				padding-left: 30upx;
				color: #999999;
				font-size: 24upx;
				align-items: center;

				image {
					margin-right: 10upx;
				}
			}

			.statusDate {
				padding-left: 30upx;
				color: #333333;
				line-height: 35upx;
			}

			.statusIcon::after {
				display: block;
				content: "";
				width: 16upx;
				height: 16upx;
				border-radius: 50%;
				background-color: #FFC26F;
				position: absolute;
				top: 32%;
				left: 0;
			}
		}

		.cardClock {
			.statusIcon {
				color: #0863E8;
			}

			.statusIcon::after {
				background-color: #0863E8;
			}
		}
	}

	.headContent {
		width: 690upx;
		padding-bottom: 5upx;
		// height: 288upx;
		margin: auto;
		box-shadow: 0 5upx 5upx rgba(0, 0, 0, 0.2);
		background-color: #fff;

		.statistics {
			width: 626upx;
			// height: 130upx;
			margin: auto;
			display: flex;
			flex-direction: column;

			.statisticsTop {
				flex: 1;
				display: flex;
				padding-bottom: 40upx;
				height: 90px;

				.statisticsMoudle {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					height: 100upx;
					margin: 45upx 0 0 0;
					border-right: 4upx solid #666666;

					.time {
						color: #333333;
						font-size: 40upx;
						font-weight: 700;

					}

					.text {
						color: #666666;
						font-size: 24upx;
						line-height: 40upx;
					}
				}

				.statisticsMoudle:last-child {
					border: none !important;
				}

			}

			.min-collapse {
				flex: 1;
			}

			// border: 1px solid red;
		}
	}



	.head {
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: center;
		border-bottom: 1rpx solid @color_border;
		color: @color_standard;

		.year {
			// position: absolute;
			// right: 7%;
		}

		.title {
			width: 200rpx;
			font-size: 32upx;
			text-align: center;
			color: #0863E8;
			font-weight: 700;
		}



		.icon {
			display: block;

			.next {
				transform: rotate(180deg);
				display: block;
			}
		}
	}


	.retract {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;

		.iconfont {
			transform: rotate(270deg);

			&.retract_icon {
				transform: rotate(90deg);
			}
		}
	}

	.date_dl {
		display: flex;
		width: 100%;

		.dd {
			flex: 1;
			text-align: center;
			height: 80rpx;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;


			.num {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				line-height: 60rpx;

				&.disabled {
					color: @color_disabled;
				}

				&.month {
					color: @color_standard;
				}

				&.today {
					background: @color;
					color: #fff;
				}
			}

			.dot {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: @color;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.dots {
		width: 6upx;
		height: 6upx;
		border-radius: 50%;
		// background-color: red;
		// border: 1upx solid red;
		margin-top: 5upx;
	}

	.head .icon-fanhui::before {
		content: "";
		color: #0863E8;
		font-weight: 700;
	}

	.ei-calendar__container__header__week {
		display: flex;
		justify-content: space-around;
	}

	.ei-calendar__container__content__item__bg {
		height: 375px;
	}

	.ei-calendar__container__content {
		height: 375px;
		display: flex;
	}

	// .ei-calendar {
	// 	color: $uni-text-color;

	// 	&--drawer {
	// 		position: fixed;
	// 		top: 0;
	// 		bottom: 0;
	// 		right: 0;
	// 		left: 0;
	// 		overflow: hidden;
	// 		z-index: 998;
	// 		visibility: hidden;

	// 		&.is-active {
	// 			visibility: visible;

	// 			.ei-calendar__mask {
	// 				opacity: 1;
	// 			}

	// 			.ei-calendar__container {
	// 				transform: translateY(0);
	// 			}
	// 		}

	// 		.ei-calendar__mask {
	// 			// 遮罩层
	// 			opacity: 0;
	// 			position: absolute;
	// 			bottom: 0;
	// 			width: 100%;
	// 			height: 100%;
	// 			background: $uni-bg-color-mask;
	// 			transition: opacity 0.3s;
	// 		}

	// 		.ei-calendar__container {
	// 			// 日历
	// 			position: absolute;
	// 			transform: translateY(100%);
	// 			bottom: 0;
	// 			transition: all 0.3s ease-in;
	// 		}
	// 	}

	// 	&__container {
	// 		// 日历
	// 		box-sizing: border-box;
	// 		width: 100%;
	// 		background: #fff;
	// 		border-top-left-radius: $uni-border-radius-lg;
	// 		border-top-right-radius: $uni-border-radius-lg;

	// 		&__header {
	// 			// 头部
	// 			display: flex;
	// 			justify-content: center;
	// 			flex-direction: column;
	// 			align-items: center;
	// 			position: relative;
	// 			box-shadow: 0 2upx 5upx $uni-bg-color-hover;
	// 			line-height: 1.5;

	// 			&__row {
	// 				width: 100%;
	// 			}

	// 			&__title {
	// 				// 标题
	// 				margin: 20upx 70upx;
	// 				text-align: center;
	// 			}

	// 			&__cancel {
	// 				// 取消按钮
	// 				float: right;
	// 				font-size: 24upx;
	// 				color: $uni-text-color-grey;
	// 				margin: 20upx 10upx;
	// 			}

	// 			&__date {
	// 				// 表头日期
	// 				margin-bottom: 20upx;
	// 				font-weight: 700;
	// 				width: 100%;
	// 				display: flex;
	// 				justify-content: space-between;
	// 				align-items: center;

	// 				&__show {}

	// 				&__btn {
	// 					font-size: 32upx;
	// 					padding: 0 50upx;

	// 					&.is-hover {
	// 						color: #bbb;
	// 					}
	// 				}

	// 				&__edge {
	// 					width: 84upx;

	// 					&.today {
	// 						border: 1px rgba(253, 46, 50, .5) solid;
	// 						border-right: 0;
	// 						font-size: 24upx;
	// 						border-top-left-radius: 50rpx;
	// 						border-bottom-left-radius: 50rpx;
	// 						color: rgba(253, 46, 50, .7);
	// 						background: rgba(241, 233, 233, .4);
	// 						text-align: center;

	// 						&.is-hover {
	// 							color: rgba(253, 46, 50, .5);
	// 						}
	// 					}
	// 				}
	// 			}

	// 			&__week {
	// 				display: flex;
	// 				justify-content: center;
	// 				align-items: center;
	// 				width: 100%;

	// 				&__day {
	// 					padding: 10upx;
	// 					width: percentage(100 / 7);
	// 					text-align: center;
	// 				}
	// 			}
	// 		}

	// 		&__content {
	// 			padding: 20upx;
	// 			height: 650upx;
	// 			box-sizing: border-box;

	// 			&__item {
	// 				box-sizing: border-box;
	// 				position: relative;

	// 				&__bg {
	// 					z-index: 1;
	// 					width: 100%;
	// 					height: 100%;
	// 					display: flex;
	// 					justify-content: center;
	// 					align-items: center;
	// 					opacity: 0.1;
	// 					position: absolute;
	// 					font-size: 240upx;
	// 					font-weight: bold;
	// 				}

	// 				&__row {
	// 					z-index: 10;
	// 					position: relative;
	// 					display: flex;
	// 					justify-content: center;
	// 					align-items: center;
	// 					width: 100%;
	// 				}

	// 				&__col {
	// 					width: percentage(100 / 7);
	// 					margin: 1upx;

	// 					&.is-range {
	// 						margin: 1upx 0;
	// 					}
	// 				}
	// 			}
	// 		}

	// 		&__footer {
	// 			padding: 20upx 40upx;
	// 			width: 100%;
	// 			box-sizing: border-box;

	// 			&__btn {
	// 				line-height: 2.5;
	// 				border-radius: 2.5em;
	// 				font-size: 28upx;
	// 			}
	// 		}
	// 	}
	// }

	.content {
		position: relative;
		overflow: hidden;
		transition: height 0.4s ease;
		// border: 1px solid red;

		.days {
			transition: top 0.3s;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			position: relative;

			.item {
				position: relative;
				display: block;
				height: 80rpx;
				line-height: 80rpx;
				width: calc(100% / 7);
				text-align: center;
				// border: 1px solid red;

				.day {
					font-style: normal;
					display: inline-block;
					vertical-align: middle;
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					overflow: hidden;
					border-radius: 60rpx;
					position: relative;

					// &.choose {
					// 	background-color: #4d7df9;
					// 	color: #fff;
					// }

					// &.nolm {
					// 	color: #fff;
					// 	opacity: 0.3;
					// }
					// .choose {
					// 	background-color: #4d7df9;
					// 	color: #fff;
					// }

					// .nolm {
					// 	color: #fff;
					// 	opacity: 0.3;
					// }
				}

				.isWorkDay {
					// color: #42464a;
					color: #42464a;
				}

				.notSigned {
					font-style: normal;
					width: 8rpx;
					height: 8rpx;
					background: #fa7268;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					pointer-events: none;
				}

				.today {
					color: #fff;
					background-color: #a8c0ff;
				}

				.workDay {
					font-style: normal;
					width: 8rpx;
					height: 8rpx;
					background: #4d7df9;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					pointer-events: none;
				}

				.markDay {
					font-style: normal;
					width: 9rpx;
					height: 9rpx;
					// background: #fc7a64;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					// bottom: 0%;
					bottom: 3%;
					transform: translate(-50%, -50%);
					pointer-events: none;
				}
			}
		}
	}

	.hide {
		height: 80rpx !important;
	}

	.weektoggle {
		width: 85rpx;
		height: 32rpx;
		position: relative;
		bottom: -42rpx;


	}

	.down {
		transform: rotate(180deg);
		bottom: 0;
	}

	.choose {

		background-color: #4d7df9;
		color: #fff !important;
	}

	.nolm {
		color: #fff !important;
		opacity: 0.3;
	}

	.wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx;
	}

	.label {
		font-size: 40rpx;
	}
</style>
